<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:pho="http://www.hitachivantara.com">
    <head>
        <title>Select and List Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <link rel="stylesheet" type="text/css" href="../dojo/dijit/themes/pentaho/pentaho.css"/>

        <script type="text/javascript" src="webcontext.js?content=common-ui"></script>

        <script type="text/javascript">
            //<![CDATA[

            $.extend(djConfig, { modulePaths: {
                                    'pentaho.common': "../pentaho/common"
                                },
                                parseOnLoad: true,
                                baseUrl: '../dojo/dojo/'
                            });

              //]]>
        </script>

        <script language='javascript' type='text/javascript' src='../dojo/dojo/dojo.js.uncompressed.js'></script>
        <script language='javascript' type='text/javascript' src='../dojo/dojo/dojo-ext.js.uncompressed.js'></script>

        <script type="text/javascript">

            dojo.require("dojo.parser");
            dojo.require("pentaho.common.Select");
            dojo.require("dijit.form.MultiSelect");
            dojo.require("pentaho.common.ListBox");

            function doload() {
                var list = dijit.byId('list1');
            }

            function selectionChanged() {
                var select = dijit.byId('select1');
                alert('Selection has changed: '+select.get('value'));
            }

            function listChanged() {
                var list = dijit.byId('list1');
                if(list) {
                    alert('List selection has changed: '+list.get('value'));
                }
            }

            function setListSelection() {
                var list = dijit.byId('list1');
                list.set('value','item4');
            }

            dojo.ready(doload);

        </script>

    </head>

    <body class="tundra body">
        
        <div style="padding: 8px; background-color:white">
        
            <h3>UI Widgets - Select and List Controls</h3>
            This example shows you how create select and list controls.
            <p/>

            <select id="select1" dojoType="pentaho.common.Select" onchange="selectionChanged()" >
                <option value="opt1">Option 1</option>
                <option value="opt2">Option 2</option>
                <option value="opt3">Option 3</option>
                <option value="opt4">Option 4</option>
                <option value="opt5">Option 5</option>
            </select>

            <select multiple="false" id="list1" dojoType="pentaho.common.ListBox" height="100px" onchange="listChanged()" >
                <option value="item1">Item 1</option>
                <option value="item2">Item 2</option>
                <option value="item3">Item 3</option>
                <option value="item4">Item 4</option>
                <option value="item5">Item 5</option>
            </select>

            <button class="pentaho-button" onclick="setListSelection()">Select item 4</button>

        </div>

    </body>
  
</html>
